<template>
	<view class="page" :style="pageStyle">
		<view v-if="showAd" style="width: 250px; height: 250px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
			<u-icon @click="closeAd" name="close" style="position: absolute; top:4%;right: 4%; z-index: 99999;"></u-icon>
			<u-image :src="imgSrc" width="250px" height="250px" showMenuByLongpress="true" @click="previewImg"></u-image>
		</view>
		<navigation :style="'height:' + navBarHeight + 'px;'">
			<template v-slot:content>
				<view class="content">
					<text class="iconfont icon-shangyige" @click="reback()"></text>
					<view class="menu" @click="toShowShadow()">
						<text class="iconfont icon-caidan" style="margin-right: 10rpx;color: #23b8ff;"></text>
						<text style="font-weight: 700; letter-spacing: 2rpx; color: #707070 ;">菜单</text>
					</view>
					<view class="title" style="font-size: 22rpx;">仲园觅Ta</view>
				</view>
			</template>
		</navigation>
		<!-- 查询 ——start-->
		<miTaSearch class="top" @searchResult="searchResult()" @searchInput="searchInput()" @cut="cut"
			@getSearchResult="getSearchResult()" :style="'top:' + navBarHeight + 'rpx;'">
		</miTaSearch>
		<!--  查询 ——end-->
		<!-- 结果 ——start -->
		<view class="result">
			<view class="noDataTip" v-if="noData" :style="{'margin-top': (isAnother ? '':'-80rpx')}">
				<view class="iconfont icon-wuanpai" style="color:#6B6B6B;margin-right: 25rpx;font-size: 45rpx;"></view>
				<view style="font-size: 45rpx;">暂无查询结果!</view>
			</view>
			<view class="box" :style="{'margin-top': (isAnother ? '280rpx':'380rpx')}" v-if="!noData">
				<miTaligntPersonItem :person="item.esobject" :concernData="item.concern" :concern="true"
					:lineHeight="lineHeight" v-for="(item,index) in result" :key="index" @toHimCourse="toHimCourse()"
					@setConcern="setConcern()" @cancelConcern="cancelConcern()">
					<!-- 					<template v-slot:personName>
						<view class="person_name" v-html="item.esobject.highLight.name"></view>
					</template> -->
				</miTaligntPersonItem>
			</view>
		</view>
		<!-- 结果 ——end -->
		<!-- 菜单 ——start -->
		<view class="shadow" :style="'height:' + height + 'rpx'" v-if="showShadow" @click="showShadow = false">
			<view class="menu">
				<view class="commom_menu my_concern" @click="tomyConcern()" @click.stop>
					<view class="iconfont icon-shoucang"></view>
					<view class="menu_title">我的关注</view>
				</view>
				<view class="commom_menu visit_person" @click="tomITaVisitor()"  @click.stop>
					<view class="iconfont icon-shuikanguowo-"></view>
					<view class="menu_title">来访者</view>
					<!-- <view class="visitor_tips" v-show="hasNewVistor"></view> -->
				</view>
				<view class="commom_menu foot_person" @click="tomITaFoot()"  @click.stop>
					<view class="iconfont icon-zuji"></view>
					<view class="menu_title">足迹</view>
					<!-- <view class="visitor_tips"></view> -->
				</view>
				<view class="commom_menu right" @click="tomITaRight()"  @click.stop>
					<view class="iconfont icon-quanxian"></view>
					<view class="menu_title">权限</view>
				</view>
<!-- 				<view class="close" @click="close()">
					<view class="iconfont icon-guanbi"></view>
				</view> -->
			</view>
		</view>
		<!-- 菜单 ——end -->

		<!-- 请稍等 -->
		<!-- 		<u-loadmore :status="status" fontSize="38" marginTop="20" marginBottom="20"
			style="background-color: #F8F8F8;" /> -->
	</view>
</template>

<script>
	let interstitialAd = null;
	// import miTaSearch from "@/components/miTaSearch/miTaSearch.vue";
	import miTaligntPersonItem from "../components/miTaligntPersonItem/miTaligntPersonItem.vue"
	import miTaSearch from "../../components/miTaSearch/miTaSearch.vue"
	import navigation from "../../components/navigation/navigation.vue"
	import addMemberMixin from "../../static/js/addMemberMixin.js"
	import toHimCourse from "../../static/js/toHimCourse.js"
	export default {
		mixins: [addMemberMixin,toHimCourse],
		onLoad() {
			let that = this;
			this.navBarHeight = getApp().globalData.navBarHeight //导航栏高度
			// if (Math.floor((Math.random()*100)+1)%3 === 0) {
			//                 this.showAd = false
			//         }
			uni.getStorage({
				key: 'imgSrc',
				success: (res) => {
					// console.log(1)
					const arr = JSON.parse(res.data);
					this.imgSrcArr = arr
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							// console.log('success');
						}
					});
				},
				fail: () => {
					// console.log(3)
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							// console.log('success');
						}
					});
				}
			});

			this.header = getApp().globalData.header;
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					// console.log(res.windowHeight);

					that.height = res.windowHeight * pxToRpxScale;
					// console.log(that.height)
				}
			})
			setTimeout(() => {
				// that.interstitialShow(0)
			}, 300);


		},
		onUnload() {
			uni.hideLoading()
		},
		onShow() {
			this.isNewVistor()
		},
		onReachBottom(e) {
			// console.log('页面滚动', e);
			if (this.isName) {
				// console.log('姓名查询')
				this.nameParams.currentPage++;
				this.getSearchInput()
			} else {
				// console.log('条件查询');
				this.params.currentPage++;
				this.searchResult();
			}
		},
		onHide() {
			// console.log("onHide监听页面隐藏")
			if (interstitialAd) {
				interstitialAd = null;
			}
		},
		data() {
			return {
				showAd:true,
				imgSrc: '',
				imgSrcArr: ['http://1.14.247.152:9797/images/饿了么.jpg', 'http://1.14.247.152:9797/images/美团.jpg'],
				navBarHeight: 0, //导航栏高度
				header: null,
				height: 0,
				isName: true,
				isAnother: true,
				hasNewVistor: false,
				// params: {
				// 	grade: "",
				// 	collegeId: "",
				// 	majorId: "",
				// 	classId: "",
				// 	currentPage: 1
				// },
				// noData: true,
				// result: [],
				// nameSearch: '', //名字查找的值
				// nameParams: {
				// 	content: '',
				// 	currentPage: 1
				// },
				showShadow: false, //展示菜单
				// lineHeight: true,
				// myconcernpass: false, // 是否关注
				// hasAuthorityToSeeParams: { //访问他人课表的参数
				// 	Authority: "",
				// 	no: ""
				// },
				// browsingHistory: { //添加浏览记录的参数
				// 	no: ""
				// },
				concernParams: {
					concernedNo: ''
				},
				deleteConcernParams: {
					targetNo: ''
				},
				status: '', //加载数据的状态
			}
		},
		computed: {
			pageStyle() {
				if (this.showShadow) {
					return 'height:' + this.height + 'rpx;overflow: hidden;'
				} else {
					return 'height:' + this.height + 'rpx;'
				}
			},
			tipStyle() {
				if (this.isAnother) {
					if (this.currentChoose.length != 0) {
						return 'margin-top:' + (330 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 330 + 'rpx'
					}
				} else {
					if (this.currentChoose.length != 0) {
						return 'margin-top:' + (330 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 330 + 'rpx'
					}
				}
			},
			resultStyle() {
				if (this.isAnother) {
					if (this.currentChoose.length != 0) {
						return 'margin-top:' + (300 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 300 + 'rpx'
					}
				} else {
					if (this.currentChoose.length != 0) {
						return 'margin-top:' + (320 + this.navBarHeight) + 'rpx'
					} else {
						return 'margin-top:' + 320 + 'rpx'
					}
				}
			}
		},
		methods: {
			//页面返回
			reback() {
				// console.log('执行')
				setTimeout(() => {
					uni.reLaunch({
						url: '../../pages/menu/menu'
					});
				}, 300)
			},
			interstitialShow(times) { //显示插屏广告
				var that = this;
				setTimeout(() => {
					if (interstitialAd) {
						// console.log('插屏广告正在显示....');
						interstitialAd.show().catch((err) => {
							// console.error("插屏广告显示失败：", err);
							switch (err.errCode) {
								case 2001:
									//打开小程序一定时间内不允许展示
									that.interstitialShow(1000);
									break;
								case 2002:
									//距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告
									that.interstitialShow(1000);
									break;
								default:
									break;
							}
						})
					}
				}, times)
			},
			// //切换查询
			// cut(isAnother) {
			// 	this.isAnother = isAnother;
			// 	//返回页面顶部
			// 	this.pageScrollTo()
			// },
			//回到顶部
			pageScrollTo() {
				uni.pageScrollTo({
					scrollTop: 0, //距离页面顶部的距离
					duration: 300

				});
			},
			// getSearchResult(isName, params) {
			// 	this.result = [];
			// 	this.isName = isName;
			// 	this.params.collegeId = params.collegeId;
			// 	this.params.majorId = params.majorId;
			// 	this.params.classId = params.classId;
			// 	this.params.grade = params.grade;
			// 	this.params.currentPage = 1;
			// 	// console.log(this.params)
			// 	this.searchResult();
			// },
			//查询
			// async searchResult() {
			// 	uni.showLoading({
			// 		title: '加载中'
			// 	});
			// 	this.lineHeight = false
			// 	let res = await getApp().UniRequest("/mita/authority/student", "Get", this.params,
			// 		this.header);
			// 	console.log(res)
			// 	if (res.code === 20000) {

			// 		this.result.push(...res.data.list);
			// 		if (this.result.length != 0) {
			// 			this.noData = false;
			// 			//按班级排序
			// 			let min = {};
			// 			let index = 0;
			// 			for (let i = 0; i < this.result.length - 1; i++) {
			// 				for (let j = i; j < this.result.length; j++) {
			// 					if (i === j) {
			// 						min = this.result[i];
			// 						index = i;
			// 					} else {

			// 						if (min.esobject.source.className.replace(/[^0-9]/ig, "") > this
			// 							.result[j].esobject.source
			// 							.className.replace(/[^0-9]/ig,
			// 								"")) {
			// 							index = j;
			// 							min = this.result[j];
			// 						}
			// 					}
			// 				}
			// 				this.result[index] = this.result[i]
			// 				this.result[i] = min;
			// 			}
			// 		}
			// 		uni.hideLoading();
			// 	}
			// 	if (this.result.length == 0) {
			// 		this.noData = true
			// 	} else {
			// 		this.noData = false;
			// 	}

			// },

			//键盘输入事件
			// async searchInput(nameParams, isName, params) {
			// 	this.lineHeight = true
			// 	this.result = [];
			// 	this.isName = isName;
			// 	this.nameParams.content = nameParams.content;
			// 	this.nameParams.currentPage = 1;
			// 	this.getSearchInput(params);
			// },

			// async getSearchInput(params) {
			// 	if (params) {
			// 		uni.showLoading({
			// 			title: '加载中'
			// 		});
			// 	}
			// 	let that = this;
			// 	let header = new Object()
			// 	header.Authority = uni.getStorageSync("Authority");
			// 	let res = await getApp().UniRequest("/mita/authority/studentByName", "Get", this.nameParams,
			// 		this.header);
			// 	console.log(res);
			// 	this.text = 'request success';
			// 	if (res.code === 20000) {
			// 		uni.hideLoading();

			// 		if (res.data.list.length != 0) {

			// 			this.result.push(...res.data.list);
			// 		}
			// 		// console.log(this.result)
			// 	}
			// 	if (this.result.length == 0) {
			// 		this.noData = true
			// 	} else {
			// 		this.noData = false;
			// 	}

			// },


			//菜单
			toShowShadow() {
				this.showShadow = true;
				this.pageScrollTo()
			},

			close() {
				this.showShadow = false
			},
			
			closeAd() {
				this.showAd=false;
			},
			
			previewImg() {
			                let _this = this;
			                let imgsArray = [];
			                imgsArray[0] = this.imgSrc
			                uni.previewImage({
			                    current: 0,
			                    urls: imgsArray
			                });
			},

			//查看他人课表
			// async toHimCourse(item) {
			// 	uni.showLoading({
			// 		title: '加载中',
			// 		mask: true
			// 	});
			// 	let header = new Object()
			// 	header.Authority = uni.getStorageSync("Authority");
			// 	this.hasAuthorityToSeeParams.Authority = header.Authority;
			// 	this.hasAuthorityToSeeParams.no = item.no;
			// 	this.browsingHistory.no = item.no;
			// 	let miTaIsHaiZhu;
			// 	if (item.collegeId == 13 || item.collegeId == 4 || item.collegeId == 11) {
			// 		miTaIsHaiZhu = true
			// 	} else {
			// 		miTaIsHaiZhu = false
			// 	}
			// 	let res = await getApp().UniRequest("/mita/authority/hasAuthorityToSee", "Get", this
			// 		.hasAuthorityToSeeParams,
			// 		this.header);
			// 	// console.log(res)
			// 	if (res.code === 20008) {
			// 		uni.showToast({
			// 			title: '对方设置权限，无法访问',
			// 			icon: 'none',
			// 			duration: 3000
			// 		});
			// 		uni.hideLoading()
			// 	}
			// 	if (res.code === 20000) {
			// 		// console.log('111');
			// 		let data = await getApp().UniRequest("/mita/authority/browsingHistory", "PUT", this
			// 			.browsingHistory,
			// 			this.header);
			// 		if (data.code === 20000) {
			// 			// console.log('添加浏览记录成功');
			// 		} else {
			// 			// console.log('添加浏览记录失败')
			// 		}
			// 		uni.navigateTo({
			// 			url: '../miTaCourse/miTaCourse?Authority=' + res.data.Authority +
			// 				'&miTaIsHaiZhu=' + miTaIsHaiZhu + '&name=' + item.name
			// 		});
			// 		uni.hideLoading()
			// 	}
			// },

			//关注/取关
			async setConcern(person, concern) {
				this.concernParams.concernedNo = person.no;
				uni.showLoading({
					title: '请稍等..',
					mask: true
				});
				let res = await getApp().UniRequest("/mita/authority/concern", "PUT", this.concernParams,
					this.header);
				// console.log('关注结果', res)
				if (res.code === 20000) {
					uni.hideLoading()
					uni.showToast({
						title: '关注成功',
						icon: 'success',
						duration: 2000
					});
				} else {
					uni.hideLoading()
					uni.showToast({
						title: '请稍后重试',
						icon: 'error',
						duration: 2000
					});
				}
			},

			//取消关注
			async cancelConcern(person, concern) {
				this.deleteConcernParams.targetNo = person.no;
				uni.showLoading({
					title: '请稍等..',
					mask: true
				});
				let res = await getApp().UniRequest("/mita/authority/concern?targetNo=" + person.no, "DELETE", "",
					this.header);
				// console.log('取消关注结果', res)
				if (res.code === 20000) {
					uni.hideLoading()
					uni.showToast({
						title: '取消关注成功',
						icon: 'success',
						duration: 2000
					});
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '请稍后重试',
						icon: 'error',
						duration: 2000
					});
				}
			},

			//有访客
			async isNewVistor() {
				// uni.request({
				// 	url: '',
				// 	method: 'GET',
				// 	header: this.header,
				// 	success(res) {
				// 		console.log(res)
				// 	},
				// 	fail(error) {
				// 		console.log(error)
				// 	}
				// })
				// uni.request({
				//     url: 'http://120.77.183.115:9001/zkCourse/mita/authority/hasBrowsingHistory', //仅为示例，并非真实接口地址。
				//     header: this.header,
				//     success: (res) => {
				//         console.log(res.data);
				//     },
				// 		fail(error) {
				// 			console.log(error)
				// 		}
				// });
				let res = await getApp().UniRequest("/mita/authority/hasBrowsingHistory", "GET", "",
					this.header);
				if (res.success) {
					this.hasNewVistor = true;

				} else {
					this.hasNewVistor = false;
				}
				// console.log('有访客', res)
			},
			//觅他我的关注
			tomyConcern() {
				uni.navigateTo({
					url: '../myConcern/myConcern'
				});
			},
			//觅他近期来访
			tomITaVisitor() {
				uni.navigateTo({
					url: '../miTaVisitor/miTaVisitor?hasNewVistor=' + this.hasNewVistor
				});
			},
			//觅他足迹
			tomITaFoot() {
				uni.navigateTo({
					url: '../miTaFoot/miTaFoot'
				});
			},
			//觅他权限
			tomITaRight() {
				uni.navigateTo({
					url: '../miTaRight/miTaRight'
				});
			}
		},
		components: {
			miTaligntPersonItem,
			miTaSearch,
			navigation
		}
	}
</script>

<style lang="less" scoped>
	.page {
		/deep/ .u-image {
			
			// border-radius: 35px !important;
			
			.u-image__image {
				border-radius: 25px !important;
			}
		}
		
		background-color: #F2F2F2;
		position: relative;

		// padding-left: 20rpx;
		// padding-right: 20rpx;
		button {
			background-color: #fff;
			border: 0rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
		}

		navigation {
			width: 100%;
			position: relative;
			z-index: 100;

			.content {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon-shangyige {
					font-size: 40rpx;
					font-weight: 700;
					position: absolute;
					left: 0rpx;
				}

				.menu {
					position: absolute;
					left: 80rpx;
				}

				.title {}
			}
		}

		.top {
			position: fixed;
			z-index: 100;
			top: 0rpx;
			width: 100%;

			.menu {
				position: absolute;
				top: 0rpx;
				right: 26rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				color: #23b8ff;
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.result {
			// position: relative;
			background-color: #F2F2F2;
			padding-top: 40rpx;

			.noDataTip {
				height: 150rpx;
				width: 650rpx;
				line-height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 50%;
				margin-top: -150rpx;
				left: 50%;
				margin-left: -325rpx;
				font-size: 50rpx;
				color: #6B6B6B;
				// background-color: #fff;
				// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
				border-radius: 20rpx;
			}

			.box {
				.person_item {
					width: 90%;
					height: 180rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					display: flex;
					background-color: #FFf;
					box-shadow: 1rpx 1rpx 10rpx #D9D9D9;
					border-radius: 10rpx;

					.person_sex {
						margin: 10rpx;
						width: 30%;
						width: 160rpx;
						height: 220rpx;
						margin-left: 20rpx;
						border-radius: 50%;
						font-size: 130rpx;
						line-height: 160rpx;
						// color: #;
						text-align: center;
					}

					.person_data {
						width: 70%;
						padding: 6rpx;
						padding-left: 6rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						line-height: 55rpx;

						// color:  	#707070;
						.person_data_item {
							&>text:nth-child(1) {
								margin-right: 10rpx;
								font-size: 30rpx;
								// font-weight: 700;
								// color: #707070;
							}

							&>text:nth-child(2) {
								font-size: 28rpx;
								color: #555555;
							}

						}


					}
				}
			}


		}

		.shadow {
			height: 100%;
			width: 100%;
			z-index: 200;
			// background-color: pink;
			position: absolute;
			top: 0;
			background: rgba(0, 0, 0, 0.4);

			padding: 46rpx 0rpx 0rpx 36rpx;

			.commom_menu {
				width: 180rpx;
				height: 180rpx;
				background-color: pink;
				margin-right: 36rpx;
				margin-top: 60rpx;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				line-height: 50rpx;
				color: #FFFFFF;
			}

			.visit_person {
				position: relative;
				background-color: #F4A460;

				.visitor_tips {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					top: 0rpx;
					right: 10rpx;
					border-radius: 50%;
					background-color: #EE4000;
					color: #FFFFFF;
				}
			}

			.foot_person {
					position: relative;
				background-color: #9BCD9B;
				.visitor_tips {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					top: 0rpx;
					right: 10rpx;
					border-radius: 50%;
					background-color: #EE4000;
					color: #FFFFFF;
				}
			}

			.right {
				background-color: #23b8ff;
			}

			.my_concern {
				background-color: #AB82FF;
			}


			.close {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background-color: pink;
				position: absolute;
				left: 50%;
				margin-left: -35rpx;
				bottom: 20%;
				background: rgba(0, 0, 0, 0.3);
				line-height: 70rpx;
				text-align: center;

				.iconfont {
					font-size: 40rpx;
					font-weight: 700;
					color: #E5E5E5;
				}
			}
		}

		.shadow .iconfont {
			font-size: 40rpx;
		}

		.shadow .menu {
			// height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-top: 220rpx;
		}
	}
</style>
